<template>
  <el-dialog
    title="重新登录"
    :visible.sync="reLogin"
    :show-close='false'
    width="550px"
    class="popup">
    <div class="scrollbar-wrap">
      <el-scrollbar class="scrollbar-x" style="height:100%">
        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" type="password" autocomplete="off" clearable></el-input>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" :disabled="loading" @click="handleLogin">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { encryption } from 'utils/encryption.js'
import { setToken, getCookies } from 'utils/auth.js'
import { login } from '@/api/user.js'
export default {
  data() {
    return {
      loading: false,
      loginForm: {
        username: '',
        password: '',
      }
    };
  },
  computed: {
    loginRules() {
      const validateUsername = (rule, value, callback) => {
        if (value.length > 10) {
          callback(new Error('用户名最大长度为10位'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码最小长度为6位'))
        } else {
          callback()
        }
      }
      const validateCode = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('The password can not be less than 6 digits'))
        } else {
          callback()
        }
      }

      return {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { validator: validateUsername }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validatePassword }
        ],
        code: [
          { required: true, message: '请输入验证吗', trigger: 'blur' },
          { validator: validateCode }
        ],
      }
    }
    
  },
  created() {
    let userInfo = getCookies('userInfo')
    if (userInfo) {
      userInfo = JSON.parse(getCookies('userInfo'))
      this.loginForm.username = userInfo.username
      this.loginForm.password = userInfo.password
    }
    
  },
  mounted() {
    console.log(2, this.$store.getters)
  },
  computed: {
    ...mapGetters(['reLogin']),
    rules() {
      return {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        checkPass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      }
    }
      
  },
  methods: {
    handleClose(done) {
     this.togglePopup(false)
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          const sendData = encryption({
            data: this.loginForm,
            key: 'sirengine1234567',
            param: ['password'],
          })
          sendData.grant_type = 'password'
          this.loading = true
          login(sendData)
            .then(res => {
              this.loading = false
              setToken(res.access_token)
            })
            .catch(err => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~styles/popup.scss'
</style>